<template>
  <div class="model-select">
    <label>模型选择：</label>
    <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)">
      <option value="openai">GPT</option>
      <option value="wenxin">文心一言</option>
      <option value="qwen">通义千问</option>
      <option value="zhipu">智谱清言</option>
      <option value="qianfan">Qianfan</option>
      <option value="lfm2">LFM2 本地模型</option>
    </select>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: { type: String, default: 'openai' }
})

const emit = defineEmits(['update:modelValue'])
</script>

<style scoped>
.model-select {
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

select {
  padding: 6px 10px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  outline: none;
  cursor: pointer;
}

select:hover {
  border-color: #2563eb;
}
</style>
